<template>
  <div class="middle-footer-main">
    <div class="community">
      <div class="header">
        <i class="el-icon-picture"></i>
        <div class="title">小区</div>
      </div>
      <div class="text">{{community}}</div>
    </div>
    <div class="buliding">
      <div class="header">
        <i class="el-icon-picture"></i>
        <div class="title">楼栋</div>
      </div>
      <div class="text">{{building}}</div>
    </div>
    <div class="house">
      <div class="header">
        <i class="el-icon-picture"></i>
        <div class="title">房屋</div>
      </div>
      <div class="text">{{house}}</div>
    </div>
    <div class="number">
      <div class="header">
        <i class="el-icon-picture"></i>
        <div class="title">入住人数</div>
      </div>
      <div class="text">{{pepole}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      building: 593,
      community: 5,
      house: 3194,
      pepole: 23503
    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
$size: 20px;
  .middle-footer-main {
    width: 100%;
    display: flex;
    background-color: rgba(112, 152, 237, 0.08);
    box-sizing: border-box;
    // position: absolute;
    // top: 400px;
    // padding: 25px;
    .community {
      text-align: center;
      margin: 20px 10px;
      .header {
        display: inline-block;
        i {
          color: red;
          font-size: $size;
          // padding-left: 15px;
          display: block;
        }

      }
      .text {
          color: skyblue;
          font-size: $size;
          padding-left: 20px;
          display: inline-block;
          position: relative;
          bottom: 40px;
        }
      .title {
        color: white;
        font-size: $size;
        margin-top: 20px;
        display: inline-block;
      }
    }
    .buliding {
      text-align: center;
      margin: 20px 10px;
      .header {
        display: inline-block;
        i {
          color: yellow;
          font-size: $size;
          // padding-left: 15px;
          display: block;
        }
        span {
          color: blue;
          font-size: $size;
        }
      }
      .title {
        color: white;
        font-size: $size;
        margin-top: 20px;
        display: inline-block;
      }
      .text {
          color: skyblue;
          font-size: $size;
          // padding-left: 20px;
          display: inline-block;
          position: relative;
          bottom: 40px;
          left: 20px;
      }
    }
    .house {
      text-align: center;
      margin: 20px 10px;
      .header {
        display: inline-block;
        i {
          color: blue;
          font-size: $size;
          // padding-left: 15px;
          display: block;
        }
        span {
          color: blue;
          font-size: $size;
        }
      }
      .title {
        color: white;
        font-size: $size;
        margin-top: 20px;
        display: inline-block;
      }
      .text {
          color: skyblue;
          font-size: $size;
          // padding-left: 20px;
          display: inline-block;
          position: relative;
          bottom: 40px;
          left: 20px;
      }
    }
    .number {
      text-align: center;
      margin: 20px 10px;
      .header {
        display: inline-block;
        i {
          color: #BA55D3;
          font-size: $size;
          // padding-left: 15px;
          display: block;
        }
        span {
          color: blue;
          font-size: $size;
        }
      }
      .title {
        color: white;
        font-size: $size;
        margin-top: 20px;
        display: inline-block;
      }
      .text {
          color: skyblue;
          font-size: $size;
          // padding-left: 20px;
          display: inline-block;
          position: relative;
          bottom: 40px;
          left: 20px;
      }
    }

  }
</style>